<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
		var sender;
		function showAllFriend(){
			$.ajax({
				type:"post",
				url:"getAllFriend",
				dataType:"json",
				success:function(d){
					console.log(d);
					var friends = $("#friends");
					friends.empty();
					for(var i = 0;i<d.list.length;i++){
						friends.append("<div class=\"friend\"><div class=\"user_head_box\"><div class=\"user_head\" style = \"background:url(img/\\"+d.list[i].user_head+")\" name = '"+d.list[i].sender+"'></div></div><div class=\"user_name_box\"><div class=\"user_name\">"+d.list[i].nickname+"<div class=\"friend_info_count\">"+d.list[i].notReadCount+"</div></div><div class=\"user_lastwords\">"+d.list[i].message+"</div></div></div>");
						//头像还没开发
					};
					$(".friend_info_count").each(function(){
						if($(this).text() == 0){
							$(this).hide(0);
						};
					});
				}
			});
		}
		
		
		$(function(){
			
			var t1 = setInterval("showAllFriend()",2000);
			/*
			$.ajax({
				type:"post",
				url:"getAllFriend",
				dataType:"json",
				success:function(d){
					var friends = $("#friends");
					for(var i = 0;i<d.list.length;i++){
						friends.append("<div class=\"friend\"><div class=\"user_head_box\"><div class=\"user_head\" name = '"+d.list[i].sender+"'></div></div><div class=\"user_name_box\"><div class=\"user_name\">"+d.list[i].nickname+"<div class=\"friend_info_count\">"+d.list[i].notReadCount+"</div></div><div class=\"user_lastwords\">"+d.list[i].message+"</div></div></div>");
						//头像还没开发
						console.log($(".friend_info_count").text());
					};
					$(".friend_info_count").each(function(){
						if($(this).text() == 0){
							$(this).hide(0);
						};
					});
				}
			});
			*/
			$("body").on("click",".friend",function(){
				var friends = $(".friend");
				var friend_name = $("#friend_name");
				var name = $(this).children(":eq(1)").children(":eq(0)").text();
				console.log(name);
				friend_name.text(name.substring(0,name.length-1));
				friends.css("background","white");
				$(this).css("background","rgb(228,229,230)");
				sender = $(this).children(":eq(0)").children(":eq(0)").attr("name");
				$(this).children(":eq(1)").children(":eq(0)").children(":eq(0)").hide(0);
				$.ajax({
					type:"post",
					url:"getAllMessage",
					dataType:"json",
					data:{
						"sender":sender
					},
					success:function(d){
						console.log(d);
						console.log(sender);
						console.log(d.list[0].message == "");
						
						var table = $("#table");
						table.empty();
						if(d.list.length<6){
							table.append("<tr id = \"first_tr\"><td></td></tr>");
						};
						
						for(var i = 0;i<d.list.length;i++){
							if(d.list[i].message != ""){
								if(d.list[i].sender == sender){
									table.append("<tr><td><div class=\"other_head2\" name = \"sender\"></div><div class=\"message_other\">&nbsp&nbsp&nbsp&nbsp"+d.list[i].message+"&nbsp&nbsp&nbsp&nbsp</div></td></tr>");
								}else{
									table.append("<tr><td><div class=\"user_head2\" name = '"+d.list[i].sender+"'></div><div class=\"message_user\">&nbsp&nbsp&nbsp&nbsp"+d.list[i].message+"&nbsp&nbsp&nbsp&nbsp</div></td></tr>");
								}
							}
						}
						
						$("#message").animate({
					    	scrollTop: $("#message").get(0).scrollHeight
					 	}, 1000);
					}
				});
			});
			$("body").on("click","#btn",function(){
				var text = $("#text");
				var message = text.val();
				text.val("");
				$.ajax({
					type:"post",
					url:"sendMessage",
					dataType:"json",
					data:{
						"message":message,
						"getter":sender
					},
					success:function(d){
						var table = $("#table");
						table.empty();
						if(d.list.length<6){
							table.append("<tr id = \"first_tr\"><td></td></tr>");
						};
						for(var i = 0;i<d.list.length;i++){
							if(d.list[i].message != ""){
								if(d.list[i].sender == sender){
									table.append("<tr><td><div class=\"other_head2\" name = \"sender\"></div><div class=\"message_other\">&nbsp&nbsp&nbsp&nbsp"+d.list[i].message+"&nbsp&nbsp&nbsp&nbsp</div></td></tr>");
								}else{
									table.append("<tr><td><div class=\"user_head2\" name = '"+d.list[i].sender+"'></div><div class=\"message_user\">&nbsp&nbsp&nbsp&nbsp"+d.list[i].message+"&nbsp&nbsp&nbsp&nbsp</div></td></tr>");
								}
							}
						}
						$("#message").animate({
					    	scrollTop: $("#message").get(0).scrollHeight
					 	}, 1000);
					}
				});
			});
			$("body").on("click","#check_btn",function(){
				var text = $("#text_user");
				var nickname = text.val();
				console.log(nickname);
				text.val("");
				console.log(sender);
				$.ajax({
					type:"post",
					url:"newMessageByNickname",
					dataType:"json",
					data:{
						"nickname":nickname
					},
					success:function(d){
						var friends = $("#friends");
						friends.empty();
						for(var i = 0;i<d.list.length;i++){
							friends.append("<div class=\"friend\"><div class=\"user_head_box\"><div class=\"user_head\" name = '"+d.list[i].sender+"'></div></div><div class=\"user_name_box\"><div class=\"user_name\">"+d.list[i].nickname+"<div class=\"friend_info_count\">"+d.list[i].notReadCount+"</div></div><div class=\"user_lastwords\">"+d.list[i].message+"</div></div></div>");
							//头像还没开发
							$(".friend_info_count").each(function(){
								if($(this).text() == 0){
									$(this).hide(0);
								};
							});
						}
					}
				});
			});
		})
		</script>
	</head>
	<body>
		<div id="container2">
			<div id="mymsg">
				<div id="wdxx">
					我的消息
				</div>
				<div id="check_user">
					请输入要查询的用户昵称
					<input type="text" id="text_user"/>
					<button id = "check_btn">查询</button>
				</div>
			</div>
			<div id="mychat">
				<div id="mychat_left">
					<div id="new_msg">
						近期消息
					</div>
					<div id="friends">
					</div>
				</div>
				<div id="mychat_right">
					<div id="friend_name">
						
					</div>
					<div id="message">
						<table id = "table" border="0" cellspacing="0" cellpadding="0">
							
						</table>
						
					</div>
					<div id="input_box">
						<button id = "btn">发送</button>
						<textarea name="text" id = "text"></textarea>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
